<template>
    <div 
        :id="'entrance'+ids" 
        class="entrance" 
        :style="{backgroundImage:'linear-gradient(to right,' + model.colorList[0] + ',' + model.colorList[1] + ',' + model.colorList[2] + ')'}" 
        @click="gotoHref(model.href)"
    >
        <div class="top">
            <p>{{model.title}}</p>
            <div>
                <img :src="model.imgSrc" alt="">
            </div>
        </div>
        <div class="bottom" v-html="model.text">

        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    mixins:[],
    props: {
        ids:{
            type:Number,
            default:0
        },
        model:{
            type:Object,
            default:function(){
                return {}
            } 
        }

    },
    data: () => ({
        entranceStyle:{
            // 
        }
    }),
    watch: {

    },
    computed: {

    },
    methods: {
        gotoHref:function(href){
            if(!!href){
                if(this.model.isneedLogin == true){
                    if(!!this.$cookies.get('SERIAL_CODE')){
                        this.goto({
                            path: href,
                        });
                    }else{
                        this.showLogin();
                    }
                }else{
                    this.goto({
                        path: href,
                    });
                }
            }else{
                this.$alert('该功能即将上线敬请期待！', {
                    confirmButtonText: '确定',
                    callback: (action) => {},
                });
            }
            
        },
        getColor:function(){
            document.getElementById('entrance'+this.ids).style.setProperty('--defaultcolor', this.model.colorList[0])
        },
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
    },
    mounted () {
        this.getColor()
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss'; 
    :root {
        --defaultcolor: $primaryColor;
    }

    .entrance{
        animation: entrance  0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        color: white;
        height: 118px;
        padding:10px 6px 0px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.4s;
        .top{
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .bottom{
            padding-top: 6px;
            line-height: 1.8em;
        }
    }

    .entrance:hover{
        box-shadow: 0 4px 16px 0 var(--defaultcolor);

    }

    @keyframes entrance {
        0% {
            transform: translateY(-50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

</style>